<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-15 14:28:15
-->
<template>
  <div id="videoDiv" class="palyer_container">
    <video
      :id="'palyer'"
      class="video-js vjs-big-play-centered vjs-fluid"
      x-webkit-airplay="allow"
      webkit-playsinline="true"
      playsinline="true"
    >
      <!-- <source
        src="http://pullhls66f02e88.live.126.net/live/5a0bb091c8194684a0d11f4aea4c6802/playlist.m3u8"
        type="application/x-mpegURL"
      /> -->
    </video>
  </div>
</template>



<script >
import {
  defineComponent,
  nextTick,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  ref,
} from "vue";
import { useRoute } from "vue-router";
import { getShareLiveinfo, checkLivePwd } from "@/api/live";
import { encruption } from "@/utils/index";
import storage from "@/utils/storage";
export default defineComponent({
  setup() {
    const route = useRoute();
    onMounted(() => {
      nextTick(() => {
        initPlayer();
      });
    });
    onBeforeUnmount(() => {
      myPlayer.value.release();
    });
    const myPlayer = ref();
    const show = ref(true);
    const initPlayer = async () => {
      myPlayer.value = neplayer(
        "palyer",
        {
          controls: true,
          autoplay: true,
          preload: "auto",
          poster: "",
          techOrder: ["html5", "flvjs", "flash"],
          loop: true, //是否循环播放
          controlBar: {
            playToggle: !false,
            volumeMenuButton: true,
          },
        },
        () => {
          console.log("加载完成");
        }
      );
      myPlayer.value.setMute(true)
      const pwds = JSON.parse(storage.getStorage("pwd"));
      const res = await getShareLiveinfo({
        liveId: route.query.liveId,
        pwd:
          route.query.isPwd == 1
            ? encodeURIComponent(encruption(pwds[route.query.liveId]))
            : false,
        type: 1,
      });
      if (typeof res === "object") {
        myPlayer.value.setDataSource({
          type: "application/x-mpegURL",
          src: res.stream.httpPullUrl,
        });
        // myPlayer.value.play();
      } else if (res === 2004 || res === -200) {
        // 密码错误
      } else if (res === 2001 || res === 2002) {
        // 需要付费
      }
    };

    return {
      route,
      show,
      myPlayer,
    };
  },
});
</script>



<style lang="scss" scoped>
.palyer_container {
  width: 100%;
  height: 210px;
  overflow: hidden;
}
</style>